<template>
  <div class="screen-container">
    <!-- 大屏模式专用布局 -->
    <div class="screen-header">
      <div class="screen-title">{{ $route.meta.title }}</div>
      <div class="screen-tools">
        <el-button type="text" @click="toggleFullscreen">
          <el-icon><FullScreen /></el-icon>
        </el-button>
      </div>
    </div>
    
    <!-- 全屏内容区域 -->
    <div class="screen-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { useFullscreen } from '@vueuse/core'

const { toggle } = useFullscreen()

const toggleFullscreen = () => {
  toggle()
}
</script>

<style lang="scss" scoped>
.screen-container {
  height: 100vh;
  background: #000;
  color: #fff;

  .screen-header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(16, 24, 64, 0.9);
    border-bottom: 1px solid rgba(64, 158, 255, 0.3);

    .screen-title {
      font-size: 24px;
      background: linear-gradient(90deg, #00f2ff, #0066ff);
      -webkit-background-clip: text;
      color: transparent;
    }
  }

  .screen-content {
    height: calc(100vh - 50px);
    overflow: hidden;
  }
}
</style> 